#banner{
    background-color: #111;
    text-align: center;
    padding-top: 10vw;
    padding-bottom: 20vw;

    & > h1{
        text-transform: uppercase;
        color: #999999;
        font-family: OSLight;
        font-size: 44px;
        span{
            color: #fcac45;
            font-family: OSBold;
        }
    }

    h5{
        font-size: 20px;
        color: #c3c3c3;
        font-family: OSLight;
        span{
            color: #c3c3c3;
            font-family: OSBold;
        }
    }
    .arrow-btn{
        margin-top: 15vw;
        margin-bottom: 5vw;
    }
}

#About{
    margin-top: 8vw;
    margin-bottom: 8vw;
    & > .container{
        display: flex;

        .right{
            width: 35%;
            .small-title{
                color: #636363;
            }
            .big-title{
                font-size: 28px;
                text-transform: uppercase;
                span{
                    font-family: OSBold;
                }
            }
            .line{
                width: 100px;
                height: 5px;
                background-color: #fcac45;
                margin-top: 10px;
            }
            .content{
                margin-top: 28px;
                width: 83%;
            }
    
            ul{
                margin-top: 35px;
                li{
                    font-family: OSBold;
                    margin-bottom: 8px;
                    span{
                        font-family: OSLtalic;
                    }
                    img{
                        margin-top: -2px;
                    }
                }
            }
    
            .about-btn{
                width: 194px;
                border: 1px solid #ccc;
                height: 48px;
                border-radius: 4px;
                text-align: center;
                line-height: 48px;
                text-transform: uppercase;
                font-size: 12px;
                margin-top: 52px;

                img{
                    margin-top: -2px;
                    margin-right: 5px;
                }
            }
        }
    }
}

#team{
    background-color: #111;
    text-align: center;
    padding-top: 8vw;
    padding-bottom: 8vw;

    & > h1{
        font-size: 44px;
        color: #fff;
        font-family: OSLight;
        text-transform: uppercase;
        span{
            font-family: OSBold;
        }
    }

    .line1{
        width: 99px;
        height: 5px;
        background-color: #fcac45;
        margin: 0 auto;
        margin-top: 10px;
        display: inline-table;
    }

    .line2{
        width: 67px;
        height: 5px;
        background-color: #b37b33;
        margin: 0 auto;
        margin-top: 10px;
        margin-bottom: 5vw;
    }

    .swiper.team-swiper{
        padding-bottom: 5vw;
        overflow: unset;
        overflow-x: hidden;
        .list{
            display: flex;
            gap: 2%;

            .item{
                width: 24%;
                text-align: center;

                .avatar{
                    width: 128px;
                    height: 128px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin: 0 auto;

                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .nickname{
                    margin: 0 auto;
                    color: #fff;
                    margin-top: 20px;

                    p:first-child{
                        font-family: OSBold;
                        text-transform: uppercase;
                    }

                    p:last-child{
                        font-size: 12px;
                        font-family: OSLight;
                    }
                }

                .info{
                    margin: 0 auto;
                    margin-top: 28px;
                    width: 90%;
                    color: #fff;
                }
            }
        }

        .swiper-pagination-bullet{
            background-color: #fff;
            opacity: 1;
            border-radius: unset;
        }

        .swiper-pagination-bullet-active{
            background-color: #fcac45;
        }
    }
    //bootstrap
    // & > .container{


    //     .promo{
    //         margin-top: 5vw;

    //         & > .carousel-indicators{
    //             bottom: -3vw;

    //             & > li{
    //                 border-radius: 0;
    //                 background-color: #fff;
    //                 width: 10px;
    //                 height: 10px;
    //                 border: none;
    //                 margin: 0;
    //             }

    //             & .active{
    //                 background-color: #fcac45;
    //             }
    //         }

    //         .carousel-caption{
    //             position: unset;
    //             display: flex;
    //             gap: 4%;
    
    //             .content{
    //                 width: 23%;
    //                 height: auto;
    //                 display: flex;
    //                 flex-wrap: wrap;
    //                 justify-content: center;
    //                 align-items: center;
    //                 color: #ffffff;
    //                 font-family: OSLight;
    
    //                 .circle{
    //                     width: 128px;
    //                     height: 128px;
    //                     border-radius: 50%;
    //                     background-color: #d7d7d7;
    //                 }

    //                 .name{
    //                     margin-top: 20px;
    //                     width: 100%;
    //                     font-family: OSLight;
    //                     font-family: OSBold;
    //                     font-size: 17px;

    //                     p{
    //                         font-family: OSLight;
    //                     }
    //                 }

    //                 .test{
    //                     margin-top: 36px;
    //                     width: 100%;
    //                     font-size: 15px;
    //                 }
    //             }
    //         }
    //     }
    // }
}

#services{
    text-align: center;
    padding-top: 8vw;
    padding-bottom: 8vw;
    & > h1{
        text-transform: uppercase;
        font-size: 44px;
        font-family: OSLight;
        color: #222;

        span{
            font-family: OSBold;
        }
    }

    .line1{
        width: 99px;
        height: 5px;
        background-color: #fcac45;
        margin: 0 auto;
        margin-top: 10px;
        display: inline-table;
    }

    .line2{
        width: 67px;
        height: 5px;
        background-color: #fdc57c;
        margin: 0 auto;
        margin-top: 10px;
    }

    & > p{
        width: 65vw;
        margin: 0 auto;
        margin-top: 40px;
        font-family: OSLight;
    }
    
    & > .container{
        margin-top: 130px;
        display: flex;
        gap: 3%;
        .content{
            width: 22%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        
            .item{
                width: 114px;
                height: 114px;
                border-radius: 50%;
                border: 6px solid #fcac45;
                font-family: OSLight;

                img{
                    margin-top: 26px;
                }
            }

            & > h3{
                font-size: 19px;
                font-family: OSBold;
                width: 100%;
                text-transform: uppercase;
                margin-top: 30px;
            }

            & > p{
                font-size: 14px;
                margin-top: 20px;
            }
        }
    }
}

#clients{
    background-color: #0b0b0b;
    text-align: center;
    padding-top: 8vw;
    padding-bottom: 8vw;

    & > h1{
        text-transform: uppercase;
        font-size: 44px;
        font-family: OSLight;
        color: #ffffff;

        span{
            font-family: OSBold;
        }
    }

    .line1{
        width: 99px;
        height: 5px;
        background-color: #fcac45;
        margin: 0 auto;
        margin-top: 10px;
        display: inline-table;
    }

    .line2{
        width: 67px;
        height: 5px;
        background-color: #fdc57c;
        margin: 0 auto;
        margin-top: 10px;
        margin-bottom: 5vw;
    }

    .swiper.clients-swiper{
        padding-bottom: 7vw;
        overflow: unset;
        overflow-x: hidden;

        .swiper-wrapper .swiper-slide .list{
            display: flex;
            gap: 2%;

            .content{
                width: 19%;
                text-align: center;

                img{
                    width: 100%;
                    height: 100%;

                }
            }
        }

        .swiper-pagination-bullet{
            background-color: #fff;
            opacity: 1;
            border-radius: unset;
        }

        .swiper-pagination-bullet-active{
            background-color: #fcac45;
        }
    }
}


#portfolio{
    text-align: center;
    padding-top: 8vw;
    padding-bottom: 8vw;
    & > h1{
        text-transform: uppercase;
        font-size: 44px;
        font-family: OSLight;
        color: #222222;

        span{
            font-family: OSBold;
        }
    }

    .line1{
        width: 99px;
        height: 5px;
        background-color: #fcac45;
        margin: 0 auto;
        margin-top: 10px;
        display: inline-table;
    }

    .line2{
        width: 67px;
        height: 5px;
        background-color: #fdc57c;
        margin: 0 auto;
        margin-top: 10px;
    }

    & > p{
        width: 60vw;
        margin: 0 auto;
        margin-top: 40px;
        font-family: OSLtalic;
    }

    .container{
        margin-top: 115px;

        .row .text-md-left{
            display: flex;
            justify-content: flex-end;
            position: relative;

            .left{
                margin-right: auto;
                color: #222222;
                text-transform: uppercase;
            }

            .right{
                position: absolute;
                width: 33%;
                display: flex;
                gap: 2%;
                color: #6c6c6c;
                text-align: center;
                letter-spacing: 2px;

                .item:hover{
                    color: #000;
                }
            }
        }


        .dropdown{
            opacity: 0;

            .dropdown-menu{
                width: 100%;
                text-align: center;
            }

            button{
                width: 100%;
                background-color: #fff;
                text-transform: uppercase;
            }
        }

        .list{
            margin-top: 45px;
            display: flex;
            gap: 3%;

            .item:active{
                img{
                    content: url(/images/item2.png);
                }
            }
        }
    }
}

#test{
    background-color: #0b0b0b;
    text-align: center;
    padding-top: 8vw;
    padding-bottom: 8vw;

    & > h1{
        text-transform: uppercase;
        font-size: 44px;
        font-family: OSBold;
        color: #ffffff;

        span{
            font-family: OSLight;
        }
    }

    .line1{
        width: 99px;
        height: 5px;
        background-color: #fcac45;
        margin: 0 auto;
        margin-top: 10px;
        display: inline-table;
    }

    .line2{
        width: 67px;
        height: 5px;
        background-color: #fdc57c;
        margin: 0 auto;
        margin-top: 10px;
        margin-bottom: 5vw;
    }

    .swiper.clients-swiper{
        padding-bottom: 7vw;
        overflow: unset;
        overflow-x: hidden;

        .swiper-wrapper .swiper-slide .list{
            .content{
                width: 100%;
                text-align: center;
                font-size: 16px;

                &:first-child{
                    color: #e7e7e7;
                }

                &:last-child{
                    margin-top: 50px;
                    color: #b2b2b2;
                }
            }
        }

        .swiper-pagination-bullet{
            background-color: #fff;
            opacity: 1;
            border-radius: unset;
        }

        .swiper-pagination-bullet-active{
            background-color: #fcac45;
        }
    }
}

#contact{
    text-align: center;
    padding-top: 8vw;
    padding-bottom: 8vw;

    & > h1{
        text-transform: uppercase;
        font-size: 44px;
        font-family: OSLight;
        color: #222222;

        span{
            font-family: OSBold;
        }
    }

    .line1{
        width: 99px;
        height: 5px;
        background-color: #fcac45;
        margin: 0 auto;
        margin-top: 10px;
        display: inline-table;
    }

    .line2{
        width: 67px;
        height: 5px;
        background-color: #fdc57c;
        margin: 0 auto;
        margin-top: 10px;
        margin-bottom: 5vw;
    }

    & > p{
        width: 47vw;
        margin: 0 auto;
        margin-top: 40px;
        font-family: OSLtalic;
        font-size: 17px;
        padding-bottom: 95px;
    }

    .container{
        width: 47vw;
        text-align: left;
        color: #636363;

        .flexbox{
            display: flex;
            justify-content: space-around;
            gap: 5%;

            .name{
                input{
                    width: 21vw;
                    height: 42px;
                    border: 1px solid #b2b2b2;
                }
            }
    
            .email{
                input{
                    width: 21vw;
                    height: 42px;
                    border: 1px solid #b2b2b2;
                }
            }
        }

        .message{
            margin-top: 30px;
            input{
                width: 100%;
                height: 165px;
                border: 1px solid #b2b2b2;
            }
        }

        button{
            width: 165px;
            height: 40px;
            background-color: #fcac45;
            color: #fff;
            font-size: 16px;
            font-family: OSBold;
            letter-spacing: 2px;
            border: unset;
            float: right;
            margin-top: 30px;
        }
    }
}

#footer{
    background-color: #222222;
    padding-top: 2vw;
    padding-bottom: 2vw;
    color: #b2b2b2;
    font-size: 9px;
    
    .container{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .icon{
            display: flex;
            gap: 14px;
        }

        & > p{
            margin-right: auto;
            font-family: OSLight;
    
            span{
                font-family: OSBold;
            }
        }
    }
}


@media screen and (max-width: 768px) {
    #banner{
        padding-top: 12vw;
        & > h1{
            font-size: 28px;
        }
        h5{
            font-size: 14px;
        }
        .arrow-btn{
            margin-top: 12vw;
            margin-bottom: 10vw;
        }
    }

    #About{
        & > .container{
            display: block;

            .right{
                width: 100%;

                .big-title{
                    font-size: 24px;
                }

                ul{
                    margin-top: 15px;
                }

                .about-btn{
                    margin-top: 25px;
                    margin-bottom: 10px;
                    width: 100%;
                }
            }
        }
    }
    
    #team {
        .swiper.team-swiper .list{
            flex-wrap: wrap;
            gap: 0;
    
            .item{
                width: 50%;
                margin-top: 15px;
    
                .nickname{
                    margin-top: 10px;
                }
    
                .info{
                    margin-top: 15px;
                }
            }
        }

        h1{
            font-size: 24px;
        }
    }

    #services{
        h1{
            font-size: 24px;
        }

        p{
            width: 85vw;
        }

        .container{
            flex-wrap: wrap;
            margin-top: 60px;
            gap: 1%;

            .content{
                margin-top: 10px;
                width: 48%;
            }
        }
    }

    #clients{
        h1{
            font-size: 24px;
        }

        .clients-swiper .list{
            padding-top: 5vw;
            padding-bottom: 10vw;
        }
    }

    #portfolio{
        h1{
            font-size: 24px;
        }
        
        p{
            width: 90vw;
        }

        .container{
            margin-top: 65px;

            .row{
                .text-md-left{
                    .left{
                        padding-left: 5px;
                        margin: 0 auto;
                    }
                    .right{
                        display: none;
                    }
                }
                .text-md-right{
                    .dropdown{
                        opacity: 1;
                    }
                }
            }

            .list{
                margin-top: 15px;
                flex-wrap: wrap;

                .item{
                    margin-top: 10px;
                    max-width: 48%;
                }

            }
        }
    }

    #test{
        h1{
            font-size: 24px;
        }

        .container{
            padding-top: 4vw;
        }
    }

    #contact{
        h1{
            font-size: 24px;
        }
        
        & > p{
            width: 90vw;
            padding-bottom: 8vw;
        }

        .container{
            width: 90vw;

            .flexbox{
                display: block;

                .name input{
                    width: 100%;
                }
                .email input{
                    width: 100%;
                }
            }
            .message{
                margin-top: 0;

                input{
                    height: 80px;
                }
            }

            button{
                width: 100%;
            }
        }
    }

    #footer .container{
        flex-wrap: wrap;
        justify-content: center;

        p{
            margin: 0;
        }

        .icon div{
            width: 20px;
            height: 20px;
        }
    }
}
